<template>
	<view class="merchant-info">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<uni-steps class="steps" :options="stepsData" :active="step"></uni-steps>

		<!-- 账户信息 -->
		<account-info v-if="step===0" :infoType="1" :formData="formData" @change-step="changeStep"
			@update:formData="formData = $event"></account-info>

		<!-- 基本信息 -->
		<base-info v-if="step===1" :formData="formData" @change-step="changeStep" @update:formData="formData = $event"
			:backStep="0" :nextStep="2"></base-info>

		<!-- 结算信息 -->
		<settlement-info v-if="step===2" :formData="formData" @change-step="changeStep"
			@update:formData="formData = $event" :backStep="1" :nextStep="3"></settlement-info>

		<!-- 门店信息 -->
		<store-info v-if="step===3" :formData="formData" @change-step="changeStep" @update:formData="formData = $event"
			:backStep="2" :nextStep="4"></store-info>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '商户信息',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		step: 0,
		stepsData: [{
			title: '账户信息'
		}, {
			title: '基本信息'
		}, {
			title: '结算信息'
		}, {
			title: '门店信息'
		}],
		formData: {
			id: 0,
			merchant_id: 0,
			store_id: 0,
			audit_opinion: '', // 审核信息
			checked: false,
			opt_type: 'modify', // 操作类型，modify修改，improve完善，add新增

			base_info: {
				merchant_type: 2, // 商户类型
				merchant_short_name: '', // 商户简称
				user_type: 1, // 店铺类型
				contact_name: "", // 联系人
				contact_phone: "", // 手机号
				email: '', // 邮箱
				store_name: "", // 店铺名称
				category_id: 0, // 店铺分类ID
				unity_category_id: 0, // 行业类目ID
				remark: '', // 备注
			},

			// 经营者信息
			legal_person: {
				legal_name: "", // M 法人姓名
				legal_num: "", // M 法人身份证号
				legal_address: "", // 身份证上的居住地
				legal_idcard_front_photo: "", // M法人身份证正面
				legal_idcard_back_photo: "", // M法人身份证反面
				hand_hold_idcard_photo: "", //O 手持身份证照(小微必须上送)
				legal_idcard_begin_date: "", // M法人身份证有效期开始日期
				legal_idcard_end_date: "", // M法人身份证有效期结束日期
				legal_idcard_validity_type: 0, ////经营者身份证是否长期有效，0短期，1长期
			},

			// 店铺地址信息
			address_info: {
				province_code: "0", // M商户所在省
				city_code: "0", // M 商户所在市
				area_code: "0", // M 商户所在区
				store_area_str: "", // 显示选择地名
				street_address: "", // M 商户详细地址
				longitude: "0.000000", // M 门店地址经度
				latitude: "0.000000", // M 门店地址纬度
			},

			// 营业执照
			license_info: {
				license_code: "", // C 营业执照注册号
				license_name: "", // C 营业执照名称
				license_address: "", // C 营业执照注册地址 
				license_photo: "", // C 营业执照照片
				license_begin_date: "", // C 营业执照注册号开始日期
				license_end_date: "", // C 营业执照注册结束日期
				license_validity_type: 0, // C 营业执照是否长期：0否，1是
			},

			// 结算信息
			account_info: {
				account_type: 2, // M 结算账户类型，1个人账户，2企业账户
				settle_type: 2, // M 结算人类型，1非法人结算，2法人结算，3对公结算
				bank_card_photo: '', //结算卡照片
				opening_license_photo: "", // 开户许可证
				bank_card_no: "", // M 银行卡号
				bank_cell_phone: "", // C 银行预留号码
				settle_name: "", // M 开户名

				// 这些是额外补充的中间变量，用户获取结算账户的信息
				bank_shot_name: "", // 显示使用：银行简称
				bank_full_name: "", // 显示使用：银行全称
				bank_branch_name: '', //银行支行名称
				account_province: "0", //开户行省
				account_city: "0", //开户行市
				account_area: "0", //开户行区县
				account_area_str: "", //开户行地区

				unionpay_code: "", // M 开户支行联行号
				settle_idcard_no: "", // C 结算人身份证号
				settle_idcard_front_photo: "", // C 结算人身份证人像面照片
				settle_idcard_back_photo: "", // C 结算人身份证人像面照片
				settle_idcard_start: "", // 结算人身份证开始日期
				settle_idcard_end: "", // 结算人身份证结束日期
				settle_idcard_validity_type: 0, // 结算人身份证是否长期：0否，1是
				unincorporated_photo: "", // C 非法人结算授权书
			},

			// 门店信息
			shop_info: {
				store_logo: '', //Logo
				store_front_photo: "", // M 门头照 
				store_cash_photo: "", // M 收银台照片 
				store_env_photo: "", //M 经营场所内设照片
				delivery_distance: 10, // 配送距离
				business_hours_start: "09:00", // 开始营业时间
				business_hours_end: "18:00", // 结束营业时间
				business_status: 0, // 营业状态
				business_week: '1,2,3,4,5,6,7', //营业日
			},
		},
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('type')) {
			state.formData.opt_type = opt.type;
		}
		getMerchantInfo();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getMerchantInfo() {
		request.get('merchant.merchant/info', {}).then(res => {
			console.log('商户信息', res);
			state.formData = res.data;
		});
	}

	function storeTypeChange(e) {
		console.log('店铺类型', e);
	}

	// 接收下一步
	const changeStep = (step) => {
		console.log('接收下一步', step);
		// 保存历史
		//savaHitory();

		state.step = step; // 下一步

		// 提交服务器
		if (state.step == 4) {
			state.step = 3;
			console.log('提交服务器', state.formData);
			apply();
		}
	}

	function apply() {
		console.log('提交表单', state.formData);
		request.post("merchant.merchant/save", state.formData)
			.then(res => {
				util.showTip(res.msg);
				if (res.code == 1) {
					setTimeout(() => {
						pageRoute(`/merchantPages/index/index`);
					}, 800);
				}
			})
			.catch(err => {
				uni.showToast({
					title: err.msg,
					icon: 'error',
					mask: true,
				})
			})
	}

	// 保存历史
	function savaHitory() {
		let str = JSON.stringify(state.formData);
		uni.setStorageSync("fubeiShop", str);
	}

	// 获取历史
	function getHitory() {
		let str = uni.getStorageSync('fubeiShop');
		const opId = state.formData.id
		if (str) {
			let arr = JSON.parse(str);

			state.formData = arr;
		}
		if (opId == 0) {
			state.formData.id = 0
		}
		console.log(state.formData)
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		step,
		stepsData,
		formData,
	} = toRefs(state);
</script>

<style lang="scss">
	.merchant-info {
		padding: 24rpx;

		.steps {
			padding: 24rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
		}
	}
</style>